@extends('layouts.header')
@section('title','试验数据')
@section('content')
    <article class="page-container">
        <form class="form form-horizontal" id="form" autocomplete="off">
            <div class="row cl">
                <label class="form-label col-sm-3">样品类型：</label>
                <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->toolname }}</label>
                <input type="hidden" name="tool_id" value="{{ $data_rel->tool_id }}">
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">检验标准：</label>
                <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->num }}</label>
                <input type="hidden" name="std_id" value="{{ $data_rel->std_id }}">
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">检验项目：</label>
                <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->itemname }}</label>
                <input type="hidden" name="item_id" value="{{ $data_rel->testitem_id }}">
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">数据标题：</label>
                <div class="formControls col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" name="data_key" autofocus>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">单位：</label>
                <div class="formControls col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" name="data_unit">
                </div>
            </div>

            @csrf

            <div class="row cl">
                <div class="col-sm-9 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">

                </div>
            </div>
        </form>
        <form id="form-table" action="/{{config('constant.name_admin')}}/testdataKey/saveSortTestdataKey" method="post">
            <div class="mt-10">
                <select class="select2 col-sm-3" name="excel_pos_id" id="excel_pos_id">
                    @foreach($excel_pos as $pos)
                        <option value="{{$pos->id}}" @if($pos->is_default == 1) selected @endif >{{$pos->name}}</option>
                    @endforeach
                </select>
                <b class="c-red">如果单个样品对应多行数据，行号为第一条数据的行号且必填，否则不用填写</b>
                <span class="btn btn-primary radius f-r mr-15" id="sub_table">保存表格</span>
            </div>
            <div class="mt-10">
                <table class="table table-border table-bordered table-hover table-bg table-responsive table-condensed">
                    <thead>
                    <tr class="text-c">
                        <th>ID</th>
                        <th>
                            数据标题
                            <br>
                            <b class="c-red">需要与试验条件的标题保持一致性，否则无法判定结论</b></th>
                        <th>单位</th>
                        <th width="60px">开始列</th>
                        <th width="60px">结束列</th>
                        <th width="60px">
                            初始行号
                            <br>
                            <span class="c-red">单行不设置！</span>
                        </th>
                        <th width="60px">排序(数据上传使用)</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($data as $val)
                        <tr class="text-c" id="tr_{{ $val->id }}">
                            <td class="id">{{ $val->id }}</td>
                            <td>
                                <input type="text" name="data[{{ $val->id }}][data_key]" class="input-text" style="text-align:center" value="{{ $val->data_key }}">
                            </td>
                            <td>{{ $val->data_unit }}</td>
                            <td class="pos_start">
                                <input type="text" name="data[{{ $val->id }}][pos_start]" class="input-text" style="text-align:center" value="{{ $val->pos_start }}">
                            </td>
                            <td class="pos_end">
                                <input type="text" name="data[{{ $val->id }}][pos_end]" class="input-text" style="text-align:center" value="{{ $val->pos_end }}">
                            </td>
                            <td class="line_num">
                                <input type="text" name="data[{{ $val->id }}][line_num]" class="input-text" style="text-align:center" value="{{ $val->line_num }}">
                            </td>
                            <td>
                                <input type="text" name="data[{{ $val->id }}][sort]" class="input-text" style="text-align:center" value="{{ $val->sort }}"></td>
                            <td>
                                <a href="javascript:;" onclick="del(this,{{ $val->id }})" class="ml-5 btn btn-danger-outline radius size-MINI">删除</a>
                                @if($val->ishide)
                                    <a href="javascript:;" onclick="hide(this,{{ $val->id }},{{ $val->ishide }})" class="ml-5 btn btn-primary-outline radius size-MINI">显示</a>
                                @else
                                    <a href="javascript:;" onclick="hide(this,{{ $val->id }},{{ $val->ishide }})" class="ml-5 btn btn-warning-outline radius size-MINI">隐藏</a>
                                @endif

                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                    @csrf
                </table>
            </div>
        </form>
    </article>

    <script type="text/javascript" src="/admin/static/myfolder/js/excel_pos/common.js?ver={{config('constant.static_res_ver')}}"></script>

    <script type="text/javascript">
        var name_admin = "{{config('constant.name_admin')}}";
        $(function () {
            var index2;

            $('.select2').select2();

            $("#form").validate({
                rules: {
                    data_key: {
                        required: true,
                        notSpace: true,
                    },
                    data_unit: {
                        notSpace: true,
                    },
                },
                // onkeyup:false,
                // focusCleanup:false,
                success: "valid",
                submitHandler: function (form) {
                    $(form).ajaxSubmit({
                        type: 'post',
                        url: "",//自己提交给自己可以不写url
                        beforeSend: function () {
                            //0.4透明度 白色遮罩
                            index2 = layer.load(2, {shade: [0.3, '#fff']});
                        },
                        complete: function () {
                            layer.close(index2);
                        },
                        success: function (data) {
                            //判断添加结果
                            if (data === '1') {
                                window.location.reload();//刷新
                                parent.layer.msg('添加成功!', {icon: 1, time: 2000});
                            } else if (data === '2') {
                                layer.msg('已存在相同的记录!', {icon: 2, time: 5000});
                            } else {
                                layer.msg('操作失败!', {icon: 2, time: 2000});
                            }
                        },
                        error: function (data) {
                            console.log(data);
                            ajax_error(data);
                        }///error---end
                    });
                }
            });
        });

        /*删除*/
        function del(obj, id) {
            var index2;

            layer.confirm('确认要删除吗？', function (index) {
                $.ajax({
                    type: 'GET',
                    url: '/'+name_admin+'/testdataKey/del?id=' + id,
                    // dataType: 'json',
                    success: function (data) {
                        // console.log(data);
                        if (data === '1') {
                            $(obj).parents("tr").remove();
                            layer.msg('删除成功!', {icon: 1, time: 2000});
                        } else {
                            layer.msg('删除失败!', {icon: 2, time: 2000});
                        }
                    },
                    error: function (data) {
                        ajax_error(data);
                    },
                    beforeSend: function () {
                        //0.4透明度 白色遮罩
                        index2 = layer.load(2, {shade: [0.05, '#000']});
                    },
                    complete: function () {
                        layer.close(index2);
                    },
                });
            });
        }

        /*隐藏*/
        function hide(obj, id, hide) {
            layer.confirm('确认要隐藏吗？', function (index) {
                ajax('GET','/'+name_admin+'/testdataKey/hide',{id:id,hide:(1-hide)},hideBak);
                function hideBak(res) {
                    if(parseInt(res) == 1){
                        location.reload();
                    }
                }
            });
        }

        $('#excel_pos_id').on('change', function () {
            ajax('get','/{{config('constant.name_admin')}}/excelPos/getTemplPos',{'excel_pos_id':$(this).val(),'type':'testdata'},getTemplPosBak,0);
            function getTemplPosBak(res) {
                if (res.length == 0) {
                    layer.msg('该模板暂无数据！以下为默认数据！');
                    return false;
                }
                for (var i = 0; i < res.length; i++) {
                    let item = res[i],
                        rel_id = item.testdata_key_id;
                    $('#tr_'+rel_id).find('td.pos_start').find('input').val(item.pos_start);
                    $('#tr_'+rel_id).find('td.pos_end').find('input').val(item.pos_end);
                }
            }
        })
        $('#sub_table').on('click', function () {
            ajax('post','saveSortTestdataKey',$('#form-table').serialize());
        })

    </script>
@endsection